---
title: Gombok
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

A gombok és gombcsoportok listája az alkalmazáson belül.

## Gomb

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Tulajdonságok   | Típus                 | Leírás                                                                                                                         |
| --------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| className       | string                | Opcionális osztálynév további stílushoz                                                                                        |
| Ikon            | `React.ComponentType` | Egy opcionális ikon komponens, amely a gombban jelenik meg                                                                     |
| cím             | string                | A gomb szövegtartalma                                                                                                          |
| teljesSzélesség | boolean               | Meghatározza, hogy a gomb az egész konténer szélességét lefedje-e                                                              |
| változat        | string                | A gomb vizuális stílusváltozata. Options include `primary`, `secondary`, and `tertiary`                        |
| méret           | string                | A gomb mérete. Két lehetőség: `small` és `medium`                                              |
| pozíció         | string                | A gomb helyzete a testvéreihez viszonyítva. Opciók: `standalone`, `left`, `right`, és `middle` |
| kiemelés        | string                | A gomb kiemelő színe. Opciók: `default`, `blue`, és `danger`                                   |
| hamarosan       | boolean               | Jelzi, ha a gomb "hamarosan" címkével van jelölve (például hamarosan megjelenő funkciók esetén)             |
| letiltott       | boolean               | Meghatározza, hogy a gomb le van-e tiltva vagy sem                                                                             |
| fókusz          | boolean               | Meghatározza, hogy a gomb fókuszban van-e                                                                                      |
| kattintás       | függvény              | Egy visszahívó funkció, amely akkor aktiválódik, amikor a felhasználó rákattint a gombra                                       |

</Tab>

</Tabs>

## Gombcsoport

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| Tulajdonságok      | Típus                 | Leírás                                                                                                                      |
| ------------------ | --------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| className          | string                | Opcionális név a további stílushoz                                                                                          |
| Ikon               | `React.ComponentType` | Egy opcionális ikon komponens, amely a gombban jelenik meg                                                                  |
| cím                | string                | A gomb szövegtartalma                                                                                                       |
| méret              | string                | A gomb mérete. Két lehetőség: `small` és `medium`                                           |
| pozíció            | string                | A gomb helyzete a testvéreihez viszonyítva. Opciók: `standalone`, `left`, `middle`, `right` |
| árnyékAlkalmazás   | boolean               | Meghatározza, hogy alkalmazzon-e árnyékot a gombra                                                                          |
| homályosAlkalmazás | boolean               | Meghatározza, hogy alkalmazzon-e homályosító effektust a gombra                                                             |
| letiltott          | boolean               | Meghatározza, hogy a gomb le van-e tiltva                                                                                   |
| fókusz             | boolean               | Jelzi, ha a gomb fókuszban van                                                                                              |

</Tab>
</Tabs>

## Lebegő gombcsoport

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| Tulajdonságok | Típus     | Leírás                                                                                        | Alapértelmezett |
| ------------- | --------- | --------------------------------------------------------------------------------------------- | --------------- |
| méret         | string    | A gomb mérete. Két lehetőség: `small` és `medium`             | kicsi           |
| gyermekek     | ReactNode | Egy React elemeket reprezentáló tömb, amelyek az egyedi gombokat képviselik a csoporton belül |                 |

</Tab>

</Tabs>

## Lebegő Ikon Gomb

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Tulajdonságok      | Típus                 | Leírás                                                                                                                         |
| ------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| className          | string                | Opcionális név a további stílushoz                                                                                             |
| Ikon               | `React.ComponentType` | Egy opcionális ikon komponens, amely a gombban jelenik meg                                                                     |
| méret              | string                | A gomb mérete. Két lehetőség: `small` és `medium`                                              |
| pozíció            | string                | A gomb helyzete a testvéreihez viszonyítva. Opciók: `standalone`, `left`, `right`, és `middle` |
| árnyékAlkalmazás   | boolean               | Meghatározza, hogy alkalmazzon-e árnyékot a gombra                                                                             |
| homályosAlkalmazás | boolean               | Meghatározza, hogy alkalmazzon-e homályosító effektust a gombra                                                                |
| letiltva           | boolean               | Meghatározza, hogy a gomb le van-e tiltva                                                                                      |
| fókusz             | boolean               | Jelzi, ha a gomb fókuszban van                                                                                                 |
| kattintás          | függvény              | Egy visszahívó funkció, amely akkor aktiválódik, amikor a felhasználó rákattint a gombra                                       |
| aktív              | boolean               | Meghatározza, hogy a gomb aktív állapotban van-e                                                                               |

</Tab>

</Tabs>

## Lebegő Ikon Gombcsoport

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| Tulajdonságok | Típus  | Leírás                                                                                                                                                                                                                                                                                          |
| ------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className     | string | Opcionális név a további stílushoz                                                                                                                                                                                                                                                              |
| méret         | string | A gomb mérete. Két lehetőség: `small` és `medium`                                                                                                                                                                                                               |
| ikonGombok    | tömb   | Objektumok tömbje, mindegyik egy ikongombot képvisel a csoportban. Minden objektumnak tartalmaznia kell az ikon komponenst, amelyet a gombban szeretne megjeleníteni, a felhasználói kattintáskor hívandó funkciót és azt, hogy a gomb aktív legyen-e vagy sem. |

</Tab>

</Tabs>

## Világos Gomb

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| Tulajdonságok | Típus             | Leírás                                                                                                |
| ------------- | ----------------- | ----------------------------------------------------------------------------------------------------- |
| className     | string            | Opcionális név a további stílushoz                                                                    |
| ikon          | `React.ReactNode` | Az ikon, amelyet a gombban szeretne megjeleníteni                                                     |
| cím           | string            | A gomb szövegtartalma                                                                                 |
| kiemelés      | string            | A gomb kiemelő színe. Opciók közé tartozik: `secondary` és `tertiary` |
| aktív         | boolean           | Meghatározza, hogy a gomb aktív állapotban van-e                                                      |
| letiltott     | boolean           | Meghatározza, hogy a gomb le van-e tiltva                                                             |
| fókusz        | boolean           | Jelzi, ha a gomb fókuszban van                                                                        |
| kattintás     | függvény          | Egy visszahívó funkció, amely akkor aktiválódik, amikor a felhasználó rákattint a gombra              |

</Tab>

</Tabs>

## Világos Ikon Gomb

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Tulajdonságok | Típus                 | Leírás                                                                                                |
| ------------- | --------------------- | ----------------------------------------------------------------------------------------------------- |
| className     | string                | Opcionális név a további stílushoz                                                                    |
| tesztId       | string                | Tesztazonosító a gombhoz                                                                              |
| Ikon          | `React.ComponentType` | Egy opcionális ikon komponens, amely a gombban jelenik meg                                            |
| cím           | string                | A gomb szövegtartalma                                                                                 |
| méret         | string                | A gomb mérete. Két lehetőség: `small` és `medium`                     |
| kiemelés      | string                | A gomb kiemelő színe. Opciók közé tartozik: `secondary` és `tertiary` |
| aktív         | boolean               | Meghatározza, hogy a gomb aktív állapotban van-e                                                      |
| letiltott     | boolean               | Meghatározza, hogy a gomb le van-e tiltva                                                             |
| fókusz        | boolean               | Jelzi, ha a gomb fókuszban van                                                                        |
| kattintás     | függvény              | Egy visszahívó funkció, amely akkor aktiválódik, amikor a felhasználó rákattint a gombra              |

</Tab>

</Tabs>

## Fő Gomb

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Tulajdonságok                | Típus                            | Leírás                                                                                                             |
| ---------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| cím                          | string                           | A gomb szövegtartalma                                                                                              |
| teljesSzélesség              | boolean                          | Meghatározza, hogy a gomb az egész konténer szélességét lefedje-e                                                  |
| változat                     | string                           | A gomb vizuális stílusváltozata. Opciók közé tartozik: `primary` és `secondary`    |
| hamarosan                    | boolean                          | Jelzi, ha a gomb "hamarosan" címkével van jelölve (például hamarosan megjelenő funkciók esetén) |
| Ikon                         | `React.ComponentType`            | Egy opcionális ikon komponens, amely a gombban jelenik meg                                                         |
| React `button` tulajdonságok | `React.ComponentProps<'button'>` | Az összes szabványos HTML gomb tulajdonságot támogatja                                                             |

</Tab>

</Tabs>

## Lekerekített Ikon Gomb

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Tulajdonságok                | Típus                                           | Leírás |
| ---------------------------- | ----------------------------------------------- | ------ |
| Ikon                         | `React.ComponentType`                           |        |
| React `button` tulajdonságok | `React.ButtonHTMLAttributes<HTMLButtonElement>` |        |

</Tab>

</Tabs>
